<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/5
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <!-- 帖子 -->
    <title>Post</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css">
    <!-- 引入导航css -->
    <link rel="stylesheet" href="${path}/css/person/person.css">
    <!-- 引入post - css -->
    <link rel="stylesheet" href="${path}/css/forum-css/post.css">

    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">
</head>
<body style="background-color: white">

<!--导航-->
<%@include file="../sharedper/nav.jsp"%>

<div style="height: 80px">
<<a id="a"></a>
</div>
<!-- 面包屑导航 -->
<div style=" font-size:12px; width: 1000px; margin: 0 auto">
    <ul class="breadcrumb" style="background-color: #f8f8f8;border: 1px solid #f0f0f0;height: 30px;">
        <li style="margin-top:-1px">
            <a href="${path}/forumF/forumFather">
                <span class="glyphicon glyphicon-home"> 首页</span>
            </a>
        </li>
        <li><a>美容吧</a></li>
        <li class="active"><a>${requestScope.postOne.post.title}</a></li>
    </ul>
</div>

<!-- 右侧悬浮 -->
<div style="width: 50px;height: 150px;float: right;position:fixed;right: 190px;top: 210px;text-align: center">
    <div>
        <a href="${path}/themeF/sendP">
            <img src="${path}/imgs/forum-imgs/书写.png" alt="" width="50px" height="50px">发帖
        </a>
    </div>
    <div>
        <a href="#top">
            <img src="${path}/imgs/forum-imgs/返回顶部 .png" alt="" width="50px" height="50px">
        </a>
    </div>
</div>

<!-- 头部盒子 -->
<div style="margin: 10px auto;width: 1000px;height: 60px; background-color: #f8f8f8; border: 1px solid #f0f0f0">
    <div style="margin: 12px 0 0 20px; height:20px;width: 878px">
        <span style="font-size: 16px;color: #ff9224">美容吧&nbsp;&nbsp;</span>
        <%--<button class="btn btn-warning" type="button"--%>
                <%--style="font-size: 10px; padding: 3px 12px;background-color: #f0f0f0;color:black; border: 0px">--%>
            <%--+关注--%>
        <%--</button>--%>
        <%--<span>&nbsp;&nbsp;已有<a>6556545</a>个帖子</span>--%>
        <a href="${path}/themeF/sendP">
            <button class="btn btn-warning" type="button"
                    style="float: right; font-size: 14px;margin: 0 -40px 0 0; padding: 6px 20px;background-color: #ff8b3d">
                <a href="${path}/themeF/sendP">
                <span class="glyphicon glyphicon-pencil">&nbsp;</span>去发帖
                </a>
            </button>
        </a>
    </div>
</div>

<div style="margin: 20px auto; width: 1000px;">
    <!-- 左侧盒子 -->
    <div style="width: 740px;float: left;border: 1px solid #f0f0f0;
        background-color: #f8f8f8;">
        <div style="margin: 20px 20px 20px 20px">
            <div style="float:left;">
                <span style="font-size: 22px;color: #ff9224">&nbsp;${requestScope.postOne.post.title}</span>
                <br><br>
                <%--<span style="font-size: 12px;color: #adadad">&nbsp;&nbsp;${requestScope.postOne.post.ptime}&nbsp;</span>--%>
                <span style="font-size: 12px;color: #adadad">&nbsp;&nbsp;
                      <fmt:formatDate value="${requestScope.postOne.post.ptime}" pattern="yyyy-MM-dd" var="year"/>${year}&nbsp;
                    <%--<fmt:parseDate value="${requestScope.postOne.post.ptime}" pattern="yyyy-MM-dd" var="year"/>${year}&nbsp;--%>

                 </span>



            </div>
            <%--<div style="float: right;font-size: 12px; margin-top: 50px;color: #adadad">--%>
            <%--<span class="glyphicon glyphicon-eye-open">&nbsp;20000</span>--%>
            <%--<span class="glyphicon glyphicon-comment">&nbsp;1000</span>--%>
            <%--</div>--%>
            <hr style="height: 1px;background-color: #f0f0f0;margin: 100px 0 0 2px; width: 700px">

            <!-- 帖子内容 -->
            <div style="margin-top: 50px;font-size: 16px;">
                ${requestScope.postOne.post.postContent}
            </div>
            <!-- 帖子图片 -->
            <div style="margin-top: 15px">
                <img src="${path}/imgs/forum-imgs/5451de9cbf535.jpg" alt="" style="max-width: 100%">
            </div>
            <div style="margin-top: 15px">
                <img src="${path}/imgs/forum-imgs/5451deabc33ac.jpg" alt="" style="max-width: 100%">
            </div>
            <div style="margin-top: 15px">
                <img src="${path}/imgs/forum-imgs/5c1dde8b028cb.jpg" alt="" style="max-width: 100%">
            </div>

            <div style="margin-top: 30px">
                <span id="zan" style="float: left;">${requestScope.postOne.post.pointNum}</span>&nbsp;已赞
                <%--<span style="float: right;">举报</span>--%>
            </div>
            <div style="margin: 100px auto 260px; width: 220px">
                <%--点赞--%>
                <button id="d" onclick="num()" style="border: 1px solid #adadad;border-radius: 50%;padding: 30px 30px;
                    background-color: #f8f8f8;float: left;">
                    <span id="sp1" style="display: none">${requestScope.postOne.post.postId}</span>
                    <img src="${path}/imgs/forum-imgs/赞 (1).png" alt="" width="30px;height30px">
                </button>
                <%--收藏--%>
                <button id="collect" type="button" style="border: 1px solid #adadad;border-radius: 50%;padding: 30px 30px;
                    background-color: #f8f8f8;float: right;">
                    <img src="${path}/imgs/forum-imgs/赞.png" alt="" width="30px;height30px">
                </button>
            </div>
        </div>
    </div>
    <!-- 右侧盒子 -->
    <div style="width: 240px;float: right;border: 1px solid #f0f0f0;
        background-color: #f8f8f8;">
        <div style="margin: 20px 20px 20px 20px">
            <%--<img src="${path}/imgs/forum-imgs/111.png" height="300px" width="200px">--%>
            <div style="width: 60px; height:60px;margin: 30px auto 20px">
                <img src="${requestScope.postOne.userInfo.picfilename}" alt="" style="width: 60px;height: 60px;">
            </div>
            <div style=" height:40px;text-align: center;line-height: 20px;">
                <span><a href="#">${requestScope.postOne.userInfo.uName}</a></span>
                <%--<br><span style="font-size: 10px;color: #adadad;">新进狗民</span>--%>
                <%--<br><span style="font-size: 10px;color: #adadad;">ID：1</span>--%>
            </div>
            <%--<div--%>
                    <%--style="text-align: center;width: 220px;height: 50px;margin: 30px 0 0 20px;font-size: 12px;color: #adadad;">--%>
                <%--<ul>--%>
                    <%--<li>--%>
                        <%--<span>132</span><br>--%>
                        <%--<span>&nbsp;帖子数&nbsp;&nbsp;&nbsp;</span>--%>
                    <%--</li>--%>
                    <%--<li>--%>
                        <%--<span>132</span><br>--%>
                        <%--<span>&nbsp;&nbsp;&nbsp;帖子数&nbsp;&nbsp;&nbsp;</span>--%>
                    <%--</li>--%>
                    <%--<li>--%>
                        <%--<span>132</span><br>--%>
                        <%--<span>&nbsp;&nbsp;&nbsp;帖子数&nbsp;</span>--%>
                    <%--</li>--%>
                <%--</ul>--%>
            <%--</div>--%>
            <div style="margin-left: 30px;">
                <%--<input id="userId" value="${requestScope.postOne.post.userId}" style="display: none">--%>
                <%--<button class="btn btn-warning" onclick="per()"--%>
                        <%--style="background-color: #ff8b3d">查看他的个人中心--%>
                <%--</button>--%>
                   <a href="/PetForums/info/personal/${requestScope.postOne.post.userId}"><button class="btn btn-warning"
                            style="background-color: #ff8b3d">查看他的个人中心
                    </button></a>
                <%--<button class="btn btn-info" style="background-color: #46a3ff">投诉版主</button>--%>
            </div>
        </div>
    </div>
    <!-- 空白盒子 -->
    <div style="height: 20px;width: 740px;background-color: white; clear: both;"></div>
    <!-- 评论盒子 -->
    <div style="border: 1px solid #f0f0f0;
            background-color: #f8f8f8;width: 740px;">

        <!-- 评论框 -->
        <div class="comment">
            <form class="layui-form" action="${path}/send/sendComOne" method="post"
                  style="margin-left: -10%;">
                <input name="postId" value="${requestScope.postOne.post.postId}" style="display: none">
                <input name="userId" value="${sessionScope.user.id}" style="display: none">
                <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">发表</button>
                    </div>
                </div>
            </form>
        </div>

        <div style="margin: 30px 30px">
            <c:forEach items="${comVoList}" var="comVoList">
            <div style="clear: both">
                <!-- 评论 -->
                <div>
                    <div style="float: left">
                        <img src="${comVoList.userInfo.picfilename}" alt="头像"
                             style="border-radius: 50%;width: 50px;height: 50px;">
                    </div>
                    <div style="float: left; margin: 0 0 0 15px;width: 300px">
                        <span style="color: #ff9224">${comVoList.userInfo.uName}&nbsp;</span>
                        <span style="color: #adadad">
                            <fmt:formatDate value="${comVoList.ctime}" pattern="yyyy-MM-dd" var="year"/>${year}&nbsp;
                            <%--<fmt:formatDate value="${comVoList.ctime}" pattern="hh:mm:ss" var="year"/>${year}&nbsp;--%>
                        </span>
                        <%--<span style="color: #ff9224">+关注</span>--%>
                        <br><br>
                        <span>${comVoList.content}</span>
                    </div>
                    <div style="float: right">
                        <%--<img src="${path}/imgs/forum-imgs/评论.png" alt="" width="15px" height="15px">123&nbsp;--%>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <%--评论点赞，以后优化--%>
                        <%--<img onclick="point()" src="${path}/imgs/forum-imgs/赞 (1).png" alt="" width="15px" height="15px">--%>
                            <%--<span id="n">1</span>--%>
                        <br><br>
                        <span style="color: #adadad;font-size: 12px;cursor:pointer" data-toggle="modal" data-target="#myModal${comVoList.comId}">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            评论&nbsp;
                        </span>
                        <%--<span style="color: #adadad;font-size: 12px">举报&nbsp;</span>--%>
                    </div>
                </div>

                <!-- 回复模态框（Modal）二级评论 -->
                <div class="modal fade" id="myModal${comVoList.comId}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3 class="modal-title" id="myModalLabel">
                                    <span style="color: teal">发表评论</span>
                                </h3>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                                </button>
                                <form role="form">
                                    <input id="postId" value="${comVoList.postId}" style="display: none">
                                    <input id="userId${comVoList.comId}" value="${comVoList.userId}" style="display: none">
                                    <input id="userid" value="${sessionScope.user.id}" style="display: none">
                                    <div class="form-group">
                                        <textarea class="form-control" rows="3" id="content${comVoList.comId}"></textarea>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" onclick="saveTwo('${comVoList.comId}')">提交</button>
                                    </div>
                                </form>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

                <div style="height: 10px;clear:both;"></div>
                    <!-- 回复 -->
                <div style="border:0">
                    <div class="layui-collapse"  style="border:0">
                        <div class="layui-colla-item" style="border:0">
                            <c:if test="${!empty comVoList.twocomList}">
                            <div class="layui-colla-title"
                                 style="border: 0;background-color: white;height: 30px;width: 90.5%; float: right;font-size: 11px;color: #ff9224; cursor: pointer;">
                                <span style="margin-left:10px">查看回复</span>
                            </div>
                            <div class="layui-colla-content" style="padding: 0 0; border:0">
                                <div style="background-color: white;background-size:100% 100%;margin:0 0 0 65px;clear: both;">
                                    <c:forEach items="${comVoList.twocomList}" var="p">
                                        <div style="margin: 0px 0 0 26px;">
                                            <br>
                                            <span style="color: #ff9224">${p.userInfo.uName}&nbsp;</span>
                                            <span style="color: #adadad;font-size: 12px">回复&nbsp;</span>
                                            <span style="color: #ff9224">${p.toUserInfo.uName}&nbsp;</span>
                                            <span style="color:#adadad;font-size: 12px">
                                                <fmt:formatDate value="${p.ctime}" pattern="yyyy-MM-dd" var="year"/>${year}&nbsp;
                                                <fmt:formatDate value="${p.ctime}" pattern="hh:mm:ss" var="year"/>${year}
                                            </span>
                                            <br><br>
                                            <span>${p.content}</span>
                                            <%--<span style="color: #adadad;font-size: 12px;float: right;">--%>
                                                <%--&nbsp;举报&nbsp;</span>--%>
                                            <span style="color: #adadad;font-size: 12px;float: right;cursor:pointer" data-toggle="modal" data-target="#myModal${p.comId}">评论&nbsp;</span>
                                            <br><br>
                                            <hr style="margin: 0 0">
                                        </div>
                                        <!-- 回复模态框（Modal）三级评论 -->
                                        <div class="modal fade" id="myModal${p.comId}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h3 class="modal-title" id="myModalLabel">
                                                            <span style="color: teal">发表评论</span>
                                                        </h3>
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                                                        </button>
                                                        <form role="form">
                                                            <input id="postIdThree" value="${comVoList.postId}" style="display: none">
                                                            <input id="floorThree${p.comId}" value="${p.floor}" style="display: none">
                                                            <input id="userIdThree${p.comId}" value="${p.userInfo.id}" style="display: none">
                                                            <input id="uId" value="${sessionScope.user.id}" style="display: none">
                                                            <div class="form-group">
                                                                <textarea class="form-control" rows="3" id="contentThree${p.comId}"></textarea>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-primary" onclick="saveThree('${p.comId}')">提交</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                            </c:if>
                        </div>
                    </div>
                </div>

            </div>
            </c:forEach>
        </div>

        <!-- 分页  -->
        <%--<div class="page">--%>
            <%--<a href="#" class="prev">&lt;</a>--%>
            <%--<a href="#" class="active">1</a>--%>
            <%--<a href="#">2</a>--%>
            <%--<a href="#">3</a>--%>
            <%--<a href="#">4</a>--%>
            <%--<a href="#">5</a>--%>
            <%--<a href="#">6</a>--%>
            <%--<a href="#" class="next">&gt;</a>--%>
        <%--</div>--%>


    </div>

    <%--<div style="width: 740px; background-color: #f8f8f8">--%>
        <%--<form class="layui-form" action="${path}/send/sendcom" method="post">--%>
        <%--<div id="editor" style="margin:20px 20px">--%>
            <%--<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>--%>
        <%--</div>--%>
            <%--&lt;%&ndash;<button id="btn1">html</button>&ndash;%&gt;--%>
        <%--<button id="btn1" class="btn btn-warning" style="background-color: #ff8b3d; float: right;">发送</button>--%>
        <%--</form>--%>
    <%--</div>--%>
</div>


<script type="text/javascript" src="${path}/plugins/layui/layui.all.js"></script>
<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>
<!-- 引入post - js -->
<script src="${path}/js/forum-js/post.js"></script>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="${path}/js/forum-js/wangEditor-3.1.1/release/wangEditor.min.js"></script>
<script type="text/javascript" src="${path}/js/forum-js/send.js"></script>

<%--点赞--%>
<script>
//    $(function () {
//        $("#d").click(function () {
//            var postId = $("#sp1").text();
//            $.get("/PetForums/com/point=" + postId,
//            function (data) {
//                $("#zan").text(data);
//            })
//        })
//    })
function num() {
        var zan = document.getElementById('zan');
        zan.innerHTML++;
        var id = $("#sp1").text();
        var dian = $("#zan").text();
//        alert(id);
//        alert(dian);
        $.post("${path}/top/update/"+id+"/"+dian,{postId:id,pointNum:dian},function (data) {

        })
}
function point() {
    var n = document.getElementById('n').value;
    n.innerHTML++;
}
</script>
<%--收藏--%>
<script>
    $("#collect").click(function () {
        $.post("/PetForums/com/collection",
            <%--{--%>
                <%--uid:${sessionScope.userInfo.id},--%>
                <%--kindId:${requestScope.postOne.postId}--%>
            <%--},function (data) {--%>
                <%--if (data=="可收藏"){--%>

                <%--}--%>
                <%--if (data=="未登录"){--%>
                    <%--alert("请先登录");--%>
                <%--}--%>
            <%--}--%>
        )
        alert("收藏成功！");
    });
</script>

<script>
    function per(){
//        alert("xzz");
        var userId = document.getElementById("userId");

        window.location = '/PetForums/info/personal?userId='+userId;
    }

</script>


</body>
</html>
